<template>
  <div class="container clearfix">
    <scroll-view :scroll-y="true"
                 :scroll-into-view="target"
                 :style="{'height': '100%'}"
                 @scrolltolower="infiniteScroll">
      <ul class="top clearfix">
        <li class="top-item"
            v-for="(item, index) in tab_arr"
            :key="index"
            :class="{'active':item.type==type}"
            @click="toggletab(item)">{{item.msg}}</li>
      </ul>
      <div class="content">
        <ul class="evaluation_list">
          <li class="eva_item clearfix"
              v-for="(item, i) in evaluat_list"
              :key="i">
            <div class="userInfo clearfix">
              <div class="left clearfix">
                <div class="user_logo">
                  <img :src="item.headimgurl==''?defaultImg:imgUrl+item.headimgurl"
                       alt=""
                       mode="widthFix"
                       class="img">
                </div>
                <div class="user_board">
                  <h3>{{item.user_name}} {{item.nickname}}</h3>
                  <!-- 时间 -->
                  <div class="right"
                       v-if="item.time">
                    {{item.time}}
                  </div>
                </div>
              </div>
              <div class="score clearfix">
                <!-- 星级 -->
                <img :src="item.star>=1?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <img :src="item.star>=2?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <img :src="item.star>=3?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <img :src="item.star>=4?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <img :src="item.star>=5?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                     alt=""
                     class="star">
                <span class="num">{{item.star}}分</span>
              </div>
            </div>
            <div class="eva_content">
              {{item.contents}} {{item.comment}}
            </div>
            <ul class="img_list clearfix"
                v-if="item.image_arr[0]">
              <li class="img_item"
                  v-for="(value, index) in item.image_arr"
                  :key="index"
                  @click="image_preview(item,index)">
                <img :src="imgUrl+value"
                     alt=""
                     mode="widthFix"
                     class="img">
                <span class="tip"
                      v-if="item.total_image>3 && index==2">{{item.total_image}}</span>
              </li>
            </ul>
            <div v-if="!item.is_praise"
                 class="like clearfix"
                 @click="like_it(item)">
              <img mode="widthFix"
                   src="https://h5.ameimeika.com/mp_images/jifenshangcheng/pinglunye/dianzan-1@2x.png"
                   alt=""
                   class="img"> {{item.praise}}
            </div>
            <div v-if="item.is_praise"
                 class="like clearfix">
              <img mode="widthFix"
                   src="https://h5.ameimeika.com/mp_images/mp_2.0/jifenshangcheng/dianzanhou@2x.png"
                   alt=""
                   class="img">{{item.praise}}
            </div>
          </li>

        </ul>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import imageUrl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      tab_arr: [
        {
          msg: "最新",
          type: 3
        },
        {
          msg: "好评",
          type: 2
        },
        {
          msg: "有图",
          type: 1
        }
      ],
      type: 3,
      goods_id: 0,
      evaluat_list: [],
      imgUrl: imageUrl,
      page: 1,
      isbottom: true
    };
  },
  methods: {
    toggletab (item) {
      this.type = item.type;
      this.page = 1;
      this.evaluat_list = [];
      this.isbottom = true;
      this.get_evaluation();
    },
    get_evaluation () {
      if (!this.isbottom) {
        return false;
      }
      common.fly_post("api/v4_2/shop_good_comment/list", {
        good_id: this.goods_id,
        type: this.type,
        page: this.page,
        pageSize: 10,
        user_id: wx.getStorageSync('user_id') || 0
      }, result => {
        let res = result.data;
        if (res.status_code == 0) {
          if (res.data.data.length == 0 && this.page == 1) {
            common.mmk_Loading(2, "当前没有评论")
          } else if (res.data.data.length == 0 && this.page > 1) {
            common.mmk_Loading(2, "没有更多评论了")
            this.isbottom = false;
          } else if (res.data.data.length > 0 && this.page == 1) {
            res.data.data.forEach(element => {
              element.time = new Date(element.time * 1000).Format(
                "yyyy-MM-dd hh:mm"
              );
              if (element.images) {
                element.image_arr = (element.images+'').split(",");
                element.total_image = element.image_arr.length;
              } else {
                element.image_arr = [];
                element.total_image = element.image_arr.length;
              }
            });
            this.evaluat_list = res.data.data;
          } else {
            res.data.data.forEach(element => {
              element.time = new Date(element.time * 1000).Format(
                "yyyy-MM-dd hh:mm"
              );
              
              if (element.images) {
                element.image_arr = (element.images+'').split(",");
                element.total_image = element.image_arr.length;
              } else {
                element.image_arr = [];
                element.total_image = element.image_arr.length;
              }
            });
            this.evaluat_list.push(...res.data.data);
          }
        } else {
          common.mmk_Loading(2, res.message)
        }
      })
    },
    image_preview (item, index) {
      let arr = item.image_arr,
        arr1 = [];
      arr.forEach(val => {
        val = this.imgUrl + val;
        arr1.push(val);
      });
      wx.previewImage({
        current: arr1[index], // 当前显示图片的http链接
        urls: arr1 // 需要预览的图片http链接列表
      });
    },
    infiniteScroll () {
      this.page++;
      this.get_evaluation();
    },
    like_it (item) {
      let that = this;
      common.fly_post("api/v4_2/beauty_project_order_comments/praise", {
        comment_id: item.id,
        type: 2
      }, result => {
        let res = result.data;
        if (res.status_code == 2048) {
          wx.showToast({
            title: "点赞成功", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success () {
              setTimeout(() => {
                that.page = 1;
                that.isbottom = true;
                that.get_evaluation();
              }, 1000);
            }
          });
        } else {
          common.mmk_Loading(2, res.message)
        }
      })
    }
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "评论"
    });
    Object.assign(this.$data, this.$options.data());
    this.evaluat_list = [];
    if (options.goods_name) {
      wx.setNavigationBarTitle({
        title: options.goods_name
      });
      this.goods_id = options.goods_id;
    }
  },
  onShow () {
    this.get_evaluation();
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(251, 251, 251, 1);
  .top {
    margin: 10px 15px;
    .top-item {
      width: 60px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      color: #fff;
      border-radius: 15px;
      float: left;
      margin-right: 5px;
      background: rgba(255, 152, 170, 1);
      opacity: 0.4;
    }
    .active {
      background: linear-gradient(
        180deg,
        rgba(255, 152, 170, 1) 0%,
        rgba(246, 70, 101, 1) 100%
      );
      opacity: 1;
    }
  }
  .evaluation_list {
    .eva_item {
      padding: 10px 15px;
      margin-bottom: 10px;
      background-color: #fff;
      .userInfo {
        .left {
          float: left;
          .user_logo {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #cccccc;
            float: left;
            margin-top: 3px;
            position: relative;
            overflow: hidden;
            .img {
              width: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 50%;
            }
          }
          .user_board {
            float: left;
            margin-left: 10px;
            h3 {
              font-size: 12px;
              font-family: "PingFangSC-Medium";
              color: rgba(136, 136, 136, 1);
            }
            .right {
              font-size: 10px;
              margin-top: 2px;
              font-family: "PingFangSC-Medium";
              color: rgba(136, 136, 136, 1);
            }
          }
        }
        .score {
          // float: right;
          position: absolute;
          right: 10px;
          text-align: right;
          .star {
            width: 14px;
            height: 14px;
            padding: 0 2px;
          }
          .num {
            font-size: 10px;
            color: rgba(255, 147, 69, 1);
            margin-left: 3px;
            vertical-align: top;
            // float: left;
          }
        }
      }
      .eva_content {
        font-size: 14px;
        color: rgba(136, 136, 136, 1);
        line-height: 20px;
        margin-top: 10px;
      }
      .img_list {
        height: 104px;
        margin-top: 10px;
        display: flex;
        columns: 3;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: hidden;

        .img_item {
          width: 102px;
          height: 102px;
          float: left;
          margin-right: 13.5px;
          position: relative;
          margin-bottom: 20px;
          overflow: hidden;
          .img {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .tip {
            display: block;
            width: 32px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            font-family: "PingFangSC-Medium";
            color: rgba(153, 153, 153, 1);
            border-radius: 8px;
            border: 1px solid rgba(151, 151, 151, 1);
            position: absolute;
            right: 6px;
            bottom: 6px;
            z-index: 999;
          }
        }
      }
    }
    .like {
      float: right;
      margin: 10px 0;
      .img {
        width: 15px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
      }
    }
  }
}
</style>


